import * as echarts from "echarts"
import { getViewPortHeight } from "@/util/tools"
const divHeight = getViewPortHeight() - 100
export const initChart = async (data1, data2, xData) => {
  // const myChart = echarts.getInstanceByDom(domRef)
  const divBox = document.getElementById("chartId")
  // divBox.
  const myChart = echarts.init(divBox)

  const legendData = ["终端设备检测电流", "实际电流"] //图例
  const option = {
    backgroundColor: "#061740",
    grid: {
      x: 0,
      y: 0,
      x2: 0,
      y2: 0,
      top: "15%",
      left: "3%",
      right: "3%",
      bottom: "20%",
      containLabel: true
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        crossStyle: {
          color: "#999",
          fontSize: "0.3rem"
        }
      }
    },
    legend: {
      orient: "vertical",
      left: "center",
      bottom: "10",
      // padding: [10, 0, 0, 0],
      data: legendData,
      //图例滚动
      // type: 'scroll',
      //图例文字样式
      textStyle: {
        color: "rgba(36, 173, 254, 1)",
        fontSize: "0.5rem"
      }
    },
    dataZoom: [
      {
        type: "inside", //slider表示有滑动块的，inside表示内置的
        show: true,
        // xAxisIndex: 0,
        // start: 100,
        // end: 100,
        // minSpan: 10,
        zoomLock: true
      }
    ],
    xAxis: [
      {
        type: "category",
        axisTick: {
          show: false
        },
        interval: 1,
        axisLabel: {
          color: "rgba(36, 173, 254, 1)",
          fontSize: "0.5rem",
          rotate: 50
        },
        axisLine: {
          show: false
        },
        data: xData
      }
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value} ",
          textStyle: {
            //坐标轴颜色
            color: "rgba(36, 173, 254, 1)",
            fontSize: "0.5rem"
          }
        },
        //坐标轴线样式
        splitLine: {
          show: true,
          lineStyle: {
            type: "solid", //solid实线;dashed虚线
            color: "rgba(36, 173, 254, 0.2)"
          }
        }
      },
      {
        type: "value",
        name: "",
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            //坐标轴颜色
            color: "rgba(36, 173, 254, 1)",
            fontSize: "0.5rem"
          }
        },
        //坐标轴线样式
        splitLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "rgba(36, 173, 254, 0.2)"
          }
        }
      }
    ],
    series: [
      {
        name: "终端设备检测电流",
        data: data1,
        type: "line",
        smooth: true, //true曲线; false折线
        itemStyle: {
          normal: {
            color: "#ffc600", //改变折线点的颜色
            lineStyle: {
              color: "#ffc600", //改变折线颜色
              type: "solid"
            }
          }
        },
        areaStyle: {
          //折线图颜色半透明
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255,198,0, 0.5)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(255,198,0, 0.1)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      },
      {
        name: "实际电流",
        data: data2,
        type: "line",
        smooth: true, //true曲线; false折线
        itemStyle: {
          normal: {
            color: "#24adfe", //改变折线点的颜色
            lineStyle: {
              color: "#24adfe", //改变折线颜色
              type: "solid"
            }
          }
        },
        areaStyle: {
          //折线图颜色半透明
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(36,173,254, 0.5)" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "rgba(52,112,252, 0.1)" // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }

  myChart.setOption(option)

  // 监听窗口变化，响应图表
  window.addEventListener("resize", function () {
    if (myChart) {
      myChart.resize()
    }
  })

  return {
    resize: function () {
      myChart.resize()
    }
  }
}
